<template>
  <div>
    <AccountConfigItem v-for="item in itemList" :key="item.id" :item-id="item.itemId" :icon-class="item.iconClass" :title="item.title" :sub-title="item.subtitle" :btn-text="item.btnText" @btnClickHandle="btnClickHandle" />

    <EditPassword v-if="editPasswordDialog.visible" :id="editPasswordDialog.id" :visible.sync="editPasswordDialog.visible" :is-edit-self="true" @handleClose="handleCloneEditPassword" />
  </div>
</template>

<script>

export default {
  name: 'AccountConfig',
  components: {
    AccountConfigItem: () => import('@/views/user/components/AccountConfigItem.vue'),
    EditPassword: () => import('@/views/user/components/EditPassword.vue')
  },
  data() {
    return {
      itemList: [
        {
          itemId: 'editPassword',
          iconClass: 'fa-solid fa-lock',
          title: '密码',
          subtitle: '密码强度：' + this.getPasswordLevel(),
          btnText: '修改密码'
        }
      ],
      editPasswordDialog: {
        visible: false,
        id: undefined
      }
    }
  },
  methods: {
    getPasswordLevel() {
      const passwordLevel = this.$store.getters.userInfo.passwordLevel
      if (passwordLevel === 1) {
        return '弱'
      } else if (passwordLevel === 2) {
        return '中'
      } else if (passwordLevel === 3) {
        return '强'
      }
    },
    btnClickHandle(itemId) {
      switch (itemId) {
        case 'editPassword':
          this.handleCloneEditPassword(true)
          this.editPasswordDialog.id = this.$store.getters.userInfo.id
          break
      }
    },
    handleCloneEditPassword(v) {
      this.editPasswordDialog.id = undefined
      this.editPasswordDialog.visible = v
    }
  }
}
</script>

<style scoped lang="scss">

</style>
